<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>Vue<small>&nbsp; index </small></h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12" id="vueTest">
                <p>============================</p>
                <p>Vue取值:{{}}</p>
                <h3>{{title}}</h3>
                <h2>Hello {{user.userName}}</h2>
                <p>============================</p>
                <h3>单向绑定：v-bind:value</h3>
                <p>userName:<input type="text" v-bind:value="user.userName"></p>
                <p>password:<input type="text" v-bind:value="user.password"></p>
                <p>============================</p>
                <h3>双向绑定:v-model:value</h3>
                <input type="hidden" v-model:value="user.id"/>
                <p>userName:<input type="text" v-model:value="user.userName"></p>
                <p>password:<input type="text" v-model:value="user.password"></p>
                <p>email:<input type="text" v-model:value="user.email"></p>
                <p>userImage:<input type="text" v-model:value="user.userImage"></p>
                <p>============================</p>
                <h3>事件绑定:v-on || @</h3>
                <P><input type="button" value="点击" @click="test1()"></P>
                <P><input type="button" value="按钮" @click="test2($event)" myName="yun"></P>
                <p>============================</p>
                <h3>for循环:v-for</h3>
                <P>
                <ul>
                    <li>无序列表循环</li>
                    <span v-for="(role,index) in roles">
                        <li>{{role.roleName}}</li>
                    </span>
                </ul>
                </P>
                <P>
                <span v-for="(role,index) in roles">
                    <input type="checkbox" :value="role.id"/>{{role.roleName}}
                </span>
                <span>复选框循环</span>
                </P>
                <P>
                <table>
                    <P>表格循环</P>
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Name</td>
                    </tr>
                    </thead>
                    <tbody v-for="(role, index) in roles">
                    <tr>
                        <td>{{role.id}}</td>
                        <td>{{role.roleName}}</td>
                    </tr>
                    </tbody>
                </table>
                </P>
                <p>============================</p>
                <h3>自定义组件</h3>
                <P>简单组件：<button-yun></button-yun></P>
                <p>============================</p>
                <h3>自定义组件</h3>
                <P>复杂组件：<count-button></count-button></P>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    // $(function(){
    //     alert("这是页面加载就调用的函数！");
    //     clearUser();
    // });

    //自定义简单组件
    Vue.component("button-yun",{
        template: "<button>yun</button>",
    });
     //自定义复杂组件
     Vue.component("count-button",{
         //组件定义变量时需要用函数的方式
         data:function (){
             return {count: 0}
         },
         methods:{
             countAdd: function(){
                 this.count += 1;
             }
         },
        template: "<button @click='countAdd()'>{{count}}</button>",
    });

    //定义了一个Vue实例对象
    var vueTest = new Vue({
        el: "#vueTest",
        data: {
            title: "这是一个 Vue 页面",
            user: {
                id: "1",
                userName: "赟",
                password: "123456",
                email: "873396574@qq.com",
                userImage: "/image/phoenix.jpg",

            },
            roles: [
                {id: 2, roleName: "管理员"},
                {id: 3, roleName: "管理员2"},
                {id: 4, roleName: "管理员3"},
            ],
        },       
        methods: {
            test1: function () {
                console.log(this.user);
                alert("这是一个vue函数");
            },
            //获取当前元素中的信息
            test2: function (event) {
                console.log(event);
                //event来得到当前元素信息currentTarget.attributes.getNamedItem("#")来得到当前元素的#属性
                console.log(event.currentTarget.attributes.getNamedItem("myName"));
                console.log(event.currentTarget.attributes.getNamedItem("myName").name);
                console.log(event.currentTarget.attributes.getNamedItem("myName").value);
            },
            //这个函数是为了初始化user并给user赋新属性
            clearUser: function () {
                //这个临时变量可以操作Vue
                var self = this;
                $.ajax({
                    // url:"127.0.0.1/api/user1",
                    url: "/api/user/" + this.user.id,
                    type: "get",
                    success: function (data) {
                        //这个this代表的是ajax
                        //this.user = data;
                        self.user = data;
                    },
                    error: function (data) {
                        layer.msg(data.responseText, {icon: 0});
                    },
                });
            }
        },
        created: function () {
            window.clearUser = this.clearUser;
        },
        mounted: function () {
            this.clearUser();
        }
    });
    //定义组件时要放在Vue实例之前，否则会抛出警告
     //自定义组件
     //Vue.component("button-yun",{
     //   template: "<button>yun</button>",
     //});
</script>